*{
    padding: 0;
    margin: 0;
}
li a{
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.logo{
    width: 60px;
    margin-right: 10px;
}
.item{
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.nav-bar{
    background-color: #fff;
    height:64px;
    /* 固定导航条 */
    position: fixed;
    width: 100%;
    display: flex;
    padding: 0 20px;
    /* 控制盒子总体宽度不超过100% （content padding margin） */
    box-sizing: border-box;
}
.nav-bar .left{
    display: flex;
}
.nav-bar .left .item:not(:last-child) {
    margin-right: 20px;
}

.nav-bar .search-area{
 display: flex;
 align-items: center;
 flex-grow: 1;
 justify-content:center;
}
.nav-bar .search-area .input-container{
    height: 40px;
    border: 1px solid #F1F2F3;
    border-radius: 8px;
    display: flex;
    align-items:center;
    padding: 4px 8px;
    width: 500px;
    background-color: #F1F2F3;
}
.nav-bar .search-area .input-container:hover{
    background-color: #fff;
}
.nav-bar .search-area .input-container input{
    border: none;
    outline: none;
    width: 100%;
    /* 控制input原先不带颜色 */
    background-color: transparent;
}
.nav-bar .right{
    display: flex;
}
.nav-bar .right .item:not(:last-child){
    margin-right: 20px;
}
.nav-bar .right .upload-btn{
    background-color: #fb7299;
    border: none;
    border-radius: 8px;
    width: 90px;
    height: 34px;
    color: #fff;
    /* 小手 */
    cursor: pointer;
}

.nav-bar .right .upload-btn:hover{
    background-color: #fc8bab;
}

/* 内容 */
.content{
    background-color: #69c0ff;
    /* 设置页面滚动 增加内容高度 */
    height: 2000px;
    /* 露出内容 */
    padding-top: 64px;
}